@charset "UTF-8";

// 淘宝响应式框架转rem
@function px2em($px,$base-font-size: 75px) {
 @return ($px / $base-font-size) * 1rem; 
}

//rem并不适合用到段落文本上,使用px

@mixin font-dpr($font-size){
 font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2; }
   [data-dpr="3"] & { font-size: $font-size * 3; } 
}
//  dpr 为3 的时候 换高清图
@mixin img-dpr(){
    background-image: url(image.jpg);//默认  120px
      [data-dpr="2"] & {
        background-image: url(image@2x.jpg);//两倍高清 240px
      }
      [data-dpr="3"] & {
        background-image: url(image@3x.jpg);//三倍高清  360px
      }
}
*{
  list-style: none;
}
body,html{
  /*position: relative;*/
  height:100%;
  overflow:hidden;
  /*background: #f2f2f2;*/
  .container{
    display: flex;
    padding:0 px2em(70px);
    .waikuang{
       width:100%;
      .touxiang{
        width:px2em(166px);
        height:px2em(166px);
        border:1px solid #e3e3e3;
        border-radius: 50%;
        margin:px2em(26px) auto;
        img{
          width:px2em(166px);
          height:px2em(166px);
          border-radius: 50%;
        }
      }
      li{
        width:100%;
        height:px2em(88px);
        display: flex;
        justify-content:space-between;
        border-top:1px solid #e3e3e3;
        line-height: px2em(88px);
        .xm{
          display: flex;
          align-items:center;
          img:nth-child(1){
            margin-left: px2em(8px);
            margin-right: px2em(28px);
            width:px2em(40px);
            height:px2em(40px);
          }
          span{
            @include font-dpr(14px);
            color:#333;
            display: flex;
            input{
              border:none;
              outline:none;
              background: #fff;
              width:px2em(300px);
              height:auto;
            }
          }
          img:nth-child(3){
            width:px2em(16px);
            height:px2em(30px);
            position: absolute;
            right:px2em(70px);
          }
        }
        p{
          @include font-dpr(12px);
            color:#ff6364;
            margin-right: px2em(10px);
        }
      }
      .xzsf{
        border-top:1px solid #e3e3e3;
        padding-left:px2em(10px);
        padding-top: px2em(30px);
        p{
          width:100%;
          border-left:px2em(8px) solid #14a4fb;
          padding-left:px2em(10px);
        }
      }
      .shenfen{
        width:100%;
        padding-bottom:px2em(30px);
        padding-top:px2em(34px);
        border-bottom:1px solid #e3e3e3;
        display: flex;
        justify-content:space-between;
        span{
          display: flex;
          margin:0 px2em(56px);
          @include font-dpr(14px);
          /*align-items:center;*/
          input{
            width:px2em(26px);
            height:px2em(26px);
            margin:0 px2em(20px);
          }
        }
      }
   
      .shangchuan{
        width:100%;
        display: flex;
        align-items:center;
        border-bottom:1px solid #e3e3e3;
        padding:px2em(24px) 0;
        .zheng{
          width:px2em(200px);
          height:px2em(128px);
          position: relative;
          margin-right: px2em(10px);
          #preview{
            img{
              width:px2em(200px);
              height:px2em(128px);
            }
          }
          p{
            width:100%;
            @include font-dpr(10px);
            color:#999;
            text-align: center;
            position: absolute;
            top:64%;
            left:50%;
            transform:translate(-50%,0);
          }
        }
        .fan{
          width:px2em(200px);
          height:px2em(128px);
          position: relative;
          /*margin-right: px2em(10px);*/
          #preview1{
            img{
              width:px2em(200px);
              height:px2em(128px);
            }
          }
          p{
            width:100%;
            @include font-dpr(10px);
            color:#999;
            text-align: center;
            position: absolute;
            top:64%;
            left:50%;
            transform:translate(-50%,0);
          }
        }
        span{
          margin-left: px2em(20px);
          @include font-dpr(10px);
            color:#ff6364;
            letter-spacing: px2em(2px);
            line-height: px2em(24px);
        }
      }
      .birth{
        width:100%;
        padding-bottom: px2em(30px);
         border-bottom:1px solid #e3e3e3;
        margin-top: px2em(30px);
        p{
          display: flex;
          align-items:center;
          img{
            display:inline-block;
            width:px2em(40px);
            height:px2em(40px);
            margin:0 px2em(15px) px2em(0px) px2em(5px);
          }
          span:nth-child(2){
            @include font-dpr(14px);
            color:#333;
            margin-right: px2em(10px);
          }
          span:nth-child(3){
            @include font-dpr(12px);
            color:#14a4fb;
          }
        }
        .data{
          width:100%;
          display: flex;
          justify-content:space-between;
           margin-top: px2em(40px);
           margin-left: px2em(58px);
          .nyr{
            display: flex;
            input{
              border:none;
              outline:none;
              width:px2em(60px);
            }
            input:nth-child(3){
              border:none;
              outline:none;
              width:px2em(28px);
            }
            input:nth-child(5){
              border:none;
              outline:none;
              width:px2em(28px);
            }
            span{
              margin:0;
            }
          }
          span{
            display: flex;
            align-items:center;
            @include font-dpr(14px);
            margin-right: px2em(65px);
            color:#333;
            img{
              width:px2em(26px);
              height:px2em(26px);
              margin-right: px2em(20px);
            }
          }
        }
      }
      .btn{
        display:block;
        width: px2em(576px);

        height:px2em(90px);
        background:#14a5fb;
        border:none;
        border-radius:px2em(45px);
        outline: none;
        margin:0px auto;
        @include font-dpr(14px);
        color:#fff;
        margin-top: px2em(40px);
        text-align: center;
        line-height: px2em(90px);
        box-shadow: 0px 8px 20px 0px rgba(20, 164, 251, 0.44);
      }
    }
  }
 
}

/* .slideInUp{
  height:px2em(300px) !important;
} */
/*<div class="date_roll"><div><div class="gear date_yy" data-datetype="date_yy" val="115" top="-221.98813763898957em" style="transform: translate3d(0px, -221.988em, 0px);"><div class="tooth">1900</div><div class="tooth">1901</div><div class="tooth">1902</div><div class="tooth">1903</div><div class="tooth">1904</div><div class="tooth">1905</div><div class="tooth">1906</div><div class="tooth">1907</div><div class="tooth">1908</div><div class="tooth">1909</div><div class="tooth">1910</div><div class="tooth">1911</div><div class="tooth">1912</div><div class="tooth">1913</div><div class="tooth">1914</div><div class="tooth">1915</div><div class="tooth">1916</div><div class="tooth">1917</div><div class="tooth">1918</div><div class="tooth">1919</div><div class="tooth">1920</div><div class="tooth">1921</div><div class="tooth">1922</div><div class="tooth">1923</div><div class="tooth">1924</div><div class="tooth">1925</div><div class="tooth">1926</div><div class="tooth">1927</div><div class="tooth">1928</div><div class="tooth">1929</div><div class="tooth">1930</div><div class="tooth">1931</div><div class="tooth">1932</div><div class="tooth">1933</div><div class="tooth">1934</div><div class="tooth">1935</div><div class="tooth">1936</div><div class="tooth">1937</div><div class="tooth">1938</div><div class="tooth">1939</div><div class="tooth">1940</div><div class="tooth">1941</div><div class="tooth">1942</div><div class="tooth">1943</div><div class="tooth">1944</div><div class="tooth">1945</div><div class="tooth">1946</div><div class="tooth">1947</div><div class="tooth">1948</div><div class="tooth">1949</div><div class="tooth">1950</div><div class="tooth">1951</div><div class="tooth">1952</div><div class="tooth">1953</div><div class="tooth">1954</div><div class="tooth">1955</div><div class="tooth">1956</div><div class="tooth">1957</div><div class="tooth">1958</div><div class="tooth">1959</div><div class="tooth">1960</div><div class="tooth">1961</div><div class="tooth">1962</div><div class="tooth">1963</div><div class="tooth">1964</div><div class="tooth">1965</div><div class="tooth">1966</div><div class="tooth">1967</div><div class="tooth">1968</div><div class="tooth">1969</div><div class="tooth">1970</div><div class="tooth">1971</div><div class="tooth">1972</div><div class="tooth">1973</div><div class="tooth">1974</div><div class="tooth">1975</div><div class="tooth">1976</div><div class="tooth">1977</div><div class="tooth">1978</div><div class="tooth">1979</div><div class="tooth">1980</div><div class="tooth">1981</div><div class="tooth">1982</div><div class="tooth">1983</div><div class="tooth">1984</div><div class="tooth">1985</div><div class="tooth">1986</div><div class="tooth">1987</div><div class="tooth">1988</div><div class="tooth">1989</div><div class="tooth">1990</div><div class="tooth">1991</div><div class="tooth">1992</div><div class="tooth">1993</div><div class="tooth">1994</div><div class="tooth">1995</div><div class="tooth">1996</div><div class="tooth">1997</div><div class="tooth">1998</div><div class="tooth">1999</div><div class="tooth">2000</div><div class="tooth">2001</div><div class="tooth">2002</div><div class="tooth">2003</div><div class="tooth">2004</div><div class="tooth">2005</div><div class="tooth">2006</div><div class="tooth">2007</div><div class="tooth">2008</div><div class="tooth">2009</div><div class="tooth">2010</div><div class="tooth">2011</div><div class="tooth">2012</div><div class="tooth">2013</div><div class="tooth">2014</div><div class="tooth">2015</div><div class="tooth">2016</div><div class="tooth">2017</div><div class="tooth">2018</div><div class="tooth">2019</div><div class="tooth">2020</div><div class="tooth">2021</div><div class="tooth">2022</div><div class="tooth">2023</div><div class="tooth">2024</div><div class="tooth">2025</div><div class="tooth">2026</div><div class="tooth">2027</div><div class="tooth">2028</div><div class="tooth">2029</div><div class="tooth">2030</div><div class="tooth">2031</div><div class="tooth">2032</div><div class="tooth">2033</div><div class="tooth">2034</div><div class="tooth">2035</div><div class="tooth">2036</div><div class="tooth">2037</div><div class="tooth">2038</div><div class="tooth">2039</div><div class="tooth">2040</div><div class="tooth">2041</div><div class="tooth">2042</div><div class="tooth">2043</div><div class="tooth">2044</div><div class="tooth">2045</div><div class="tooth">2046</div><div class="tooth">2047</div><div class="tooth">2048</div><div class="tooth">2049</div><div class="tooth">2050</div><div class="tooth">2051</div><div class="tooth">2052</div><div class="tooth">2053</div><div class="tooth">2054</div><div class="tooth">2055</div><div class="tooth">2056</div><div class="tooth">2057</div><div class="tooth">2058</div><div class="tooth">2059</div><div class="tooth">2060</div><div class="tooth">2061</div><div class="tooth">2062</div><div class="tooth">2063</div><div class="tooth">2064</div><div class="tooth">2065</div><div class="tooth">2066</div><div class="tooth">2067</div><div class="tooth">2068</div><div class="tooth">2069</div><div class="tooth">2070</div><div class="tooth">2071</div><div class="tooth">2072</div><div class="tooth">2073</div><div class="tooth">2074</div><div class="tooth">2075</div><div class="tooth">2076</div><div class="tooth">2077</div><div class="tooth">2078</div><div class="tooth">2079</div><div class="tooth">2080</div><div class="tooth">2081</div><div class="tooth">2082</div><div class="tooth">2083</div><div class="tooth">2084</div><div class="tooth">2085</div><div class="tooth">2086</div><div class="tooth">2087</div><div class="tooth">2088</div><div class="tooth">2089</div><div class="tooth">2090</div><div class="tooth">2091</div><div class="tooth">2092</div><div class="tooth">2093</div><div class="tooth">2094</div><div class="tooth">2095</div><div class="tooth">2096</div><div class="tooth">2097</div><div class="tooth">2098</div><div class="tooth">2099</div><div class="tooth">2100</div></div><div class="date_grid"><div>年</div></div></div><div><div class="gear date_mm" data-datetype="date_mm" val="10" top="-12em" style="transform: translate3d(0px, -12em, 0px);"><div class="tooth">1</div><div class="tooth">2</div><div class="tooth">3</div><div class="tooth">4</div><div class="tooth">5</div><div class="tooth">6</div><div class="tooth">7</div><div class="tooth">8</div><div class="tooth">9</div><div class="tooth">10</div><div class="tooth">11</div><div class="tooth">12</div></div><div class="date_grid"><div>月</div></div></div><div><div class="gear date_dd" data-datetype="date_dd" val="29" top="-50em" style="transform: translate3d(0px, -50em, 0px);"><div class="tooth">1</div><div class="tooth">2</div><div class="tooth">3</div><div class="tooth">4</div><div class="tooth">5</div><div class="tooth">6</div><div class="tooth">7</div><div class="tooth">8</div><div class="tooth">9</div><div class="tooth">10</div><div class="tooth">11</div><div class="tooth">12</div><div class="tooth">13</div><div class="tooth">14</div><div class="tooth">15</div><div class="tooth">16</div><div class="tooth">17</div><div class="tooth">18</div><div class="tooth">19</div><div class="tooth">20</div><div class="tooth">21</div><div class="tooth">22</div><div class="tooth">23</div><div class="tooth">24</div><div class="tooth">25</div><div class="tooth">26</div><div class="tooth">27</div><div class="tooth">28</div><div class="tooth">29</div><div class="tooth">30</div></div><div class="date_grid"><div>日</div></div></div></div>*/
 .date_roll_mask{
  /*height:px2em(300-36px) !important;*/
  /*height:100% !important;*/
}
/* .tooth{
  height:px2em(88px) !important;
  line-height: px2em(88px) !important;
}  */
/*<div class="date_roll_mask"><div class="date_roll"><div><div class="gear date_yy" data-datetype="date_yy" val="114" top="-219.97469280482937em" style="transform: translate3d(0px, -219.975em, 0px);"><div class="tooth">1900</div><div class="tooth">1901</div><div class="tooth">1902</div><div class="tooth">1903</div><div class="tooth">1904</div><div class="tooth">1905</div><div class="tooth">1906</div><div class="tooth">1907</div><div class="tooth">1908</div><div class="tooth">1909</div><div class="tooth">1910</div><div class="tooth">1911</div><div class="tooth">1912</div><div class="tooth">1913</div><div class="tooth">1914</div><div class="tooth">1915</div><div class="tooth">1916</div><div class="tooth">1917</div><div class="tooth">1918</div><div class="tooth">1919</div><div class="tooth">1920</div><div class="tooth">1921</div><div class="tooth">1922</div><div class="tooth">1923</div><div class="tooth">1924</div><div class="tooth">1925</div><div class="tooth">1926</div><div class="tooth">1927</div><div class="tooth">1928</div><div class="tooth">1929</div><div class="tooth">1930</div><div class="tooth">1931</div><div class="tooth">1932</div><div class="tooth">1933</div><div class="tooth">1934</div><div class="tooth">1935</div><div class="tooth">1936</div><div class="tooth">1937</div><div class="tooth">1938</div><div class="tooth">1939</div><div class="tooth">1940</div><div class="tooth">1941</div><div class="tooth">1942</div><div class="tooth">1943</div><div class="tooth">1944</div><div class="tooth">1945</div><div class="tooth">1946</div><div class="tooth">1947</div><div class="tooth">1948</div><div class="tooth">1949</div><div class="tooth">1950</div><div class="tooth">1951</div><div class="tooth">1952</div><div class="tooth">1953</div><div class="tooth">1954</div><div class="tooth">1955</div><div class="tooth">1956</div><div class="tooth">1957</div><div class="tooth">1958</div><div class="tooth">1959</div><div class="tooth">1960</div><div class="tooth">1961</div><div class="tooth">1962</div><div class="tooth">1963</div><div class="tooth">1964</div><div class="tooth">1965</div><div class="tooth">1966</div><div class="tooth">1967</div><div class="tooth">1968</div><div class="tooth">1969</div><div class="tooth">1970</div><div class="tooth">1971</div><div class="tooth">1972</div><div class="tooth">1973</div><div class="tooth">1974</div><div class="tooth">1975</div><div class="tooth">1976</div><div class="tooth">1977</div><div class="tooth">1978</div><div class="tooth">1979</div><div class="tooth">1980</div><div class="tooth">1981</div><div class="tooth">1982</div><div class="tooth">1983</div><div class="tooth">1984</div><div class="tooth">1985</div><div class="tooth">1986</div><div class="tooth">1987</div><div class="tooth">1988</div><div class="tooth">1989</div><div class="tooth">1990</div><div class="tooth">1991</div><div class="tooth">1992</div><div class="tooth">1993</div><div class="tooth">1994</div><div class="tooth">1995</div><div class="tooth">1996</div><div class="tooth">1997</div><div class="tooth">1998</div><div class="tooth">1999</div><div class="tooth">2000</div><div class="tooth">2001</div><div class="tooth">2002</div><div class="tooth">2003</div><div class="tooth">2004</div><div class="tooth">2005</div><div class="tooth">2006</div><div class="tooth">2007</div><div class="tooth">2008</div><div class="tooth">2009</div><div class="tooth">2010</div><div class="tooth">2011</div><div class="tooth">2012</div><div class="tooth">2013</div><div class="tooth">2014</div><div class="tooth">2015</div><div class="tooth">2016</div><div class="tooth">2017</div><div class="tooth">2018</div><div class="tooth">2019</div><div class="tooth">2020</div><div class="tooth">2021</div><div class="tooth">2022</div><div class="tooth">2023</div><div class="tooth">2024</div><div class="tooth">2025</div><div class="tooth">2026</div><div class="tooth">2027</div><div class="tooth">2028</div><div class="tooth">2029</div><div class="tooth">2030</div><div class="tooth">2031</div><div class="tooth">2032</div><div class="tooth">2033</div><div class="tooth">2034</div><div class="tooth">2035</div><div class="tooth">2036</div><div class="tooth">2037</div><div class="tooth">2038</div><div class="tooth">2039</div><div class="tooth">2040</div><div class="tooth">2041</div><div class="tooth">2042</div><div class="tooth">2043</div><div class="tooth">2044</div><div class="tooth">2045</div><div class="tooth">2046</div><div class="tooth">2047</div><div class="tooth">2048</div><div class="tooth">2049</div><div class="tooth">2050</div><div class="tooth">2051</div><div class="tooth">2052</div><div class="tooth">2053</div><div class="tooth">2054</div><div class="tooth">2055</div><div class="tooth">2056</div><div class="tooth">2057</div><div class="tooth">2058</div><div class="tooth">2059</div><div class="tooth">2060</div><div class="tooth">2061</div><div class="tooth">2062</div><div class="tooth">2063</div><div class="tooth">2064</div><div class="tooth">2065</div><div class="tooth">2066</div><div class="tooth">2067</div><div class="tooth">2068</div><div class="tooth">2069</div><div class="tooth">2070</div><div class="tooth">2071</div><div class="tooth">2072</div><div class="tooth">2073</div><div class="tooth">2074</div><div class="tooth">2075</div><div class="tooth">2076</div><div class="tooth">2077</div><div class="tooth">2078</div><div class="tooth">2079</div><div class="tooth">2080</div><div class="tooth">2081</div><div class="tooth">2082</div><div class="tooth">2083</div><div class="tooth">2084</div><div class="tooth">2085</div><div class="tooth">2086</div><div class="tooth">2087</div><div class="tooth">2088</div><div class="tooth">2089</div><div class="tooth">2090</div><div class="tooth">2091</div><div class="tooth">2092</div><div class="tooth">2093</div><div class="tooth">2094</div><div class="tooth">2095</div><div class="tooth">2096</div><div class="tooth">2097</div><div class="tooth">2098</div><div class="tooth">2099</div><div class="tooth">2100</div></div><div class="date_grid"><div>年</div></div></div><div><div class="gear date_mm" data-datetype="date_mm" val="10" top="-12em" style="transform: translate3d(0px, -12em, 0px);"><div class="tooth">1</div><div class="tooth">2</div><div class="tooth">3</div><div class="tooth">4</div><div class="tooth">5</div><div class="tooth">6</div><div class="tooth">7</div><div class="tooth">8</div><div class="tooth">9</div><div class="tooth">10</div><div class="tooth">11</div><div class="tooth">12</div></div><div class="date_grid"><div>月</div></div></div><div><div class="gear date_dd" data-datetype="date_dd" val="29" top="-50em" style="transform: translate3d(0px, -50em, 0px);"><div class="tooth">1</div><div class="tooth">2</div><div class="tooth">3</div><div class="tooth">4</div><div class="tooth">5</div><div class="tooth">6</div><div class="tooth">7</div><div class="tooth">8</div><div class="tooth">9</div><div class="tooth">10</div><div class="tooth">11</div><div class="tooth">12</div><div class="tooth">13</div><div class="tooth">14</div><div class="tooth">15</div><div class="tooth">16</div><div class="tooth">17</div><div class="tooth">18</div><div class="tooth">19</div><div class="tooth">20</div><div class="tooth">21</div><div class="tooth">22</div><div class="tooth">23</div><div class="tooth">24</div><div class="tooth">25</div><div class="tooth">26</div><div class="tooth">27</div><div class="tooth">28</div><div class="tooth">29</div><div class="tooth">30</div></div><div class="date_grid"><div>日</div></div></div></div></div>*/